<template>
    <div class="video-tutorial">
        <!-- 搜索条件 -->
        <el-form class="my-form"></el-form>
        <!-- add -->
        <div class="add">
            <el-button icon="Plus" type="primary" @click="add">新增APP通知消息</el-button>
        </div>
        <!-- 表格 -->
        <div class="my-table">
            <el-table :data="tableData" style="width: 100%" border v-loading="loadingData">
                <el-table-column align="center" :prop="item.prop" :label="item.label" v-for="(item, index) in tableColumn"
                    :key="index">
                    <template #default="scope" v-if="item.prop == 'handle'">
                        <el-button type="primary" size="small" @click.stop="add(scope.row)">编辑</el-button>
                        <!-- <el-button :type="scope.row.status == 1 ? 'danger' : 'primary'" size="small"
                @click.stop="setStatus(scope.$index, scope.row)" :loading="btnLoding && btnIndex == scope.$index">{{
                  scope.row.status == 1 ? '关闭通知' : '启用通知' }}</el-button> -->
                        <el-button :type="scope.row.status == 1 ? 'danger' : 'primary'" size="small"
                            @click.stop="dialogVisibleOpen(scope.$index, scope.row)"
                            :loading="btnLoding && btnIndex == scope.$index">{{
                                scope.row.status == 1 ? '关闭通知' : '启用通知' }}</el-button>
                        <el-button type="primary" size="small" @click.stop="toDetails(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 页码导航 -->
        <div class="page flexCenter">
            <el-pagination background layout="prev, pager, next" @current-change="pageChange" @prev-click="pageChange"
                @next-click="pageChange" :total="count" :page-size="state.form.limit" />
        </div>
        <el-dialog v-model="dialogVisible" title="操作提示" width="30%" center>
            <span>确定关闭通知消息吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click.stop="setStatus(tableRowInx, tableRow)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <AppNotifyConfigDetail ref="detailRef" />
    </div>
</template>
  

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getAppNotifyConfig, setSataus, configDetail } from '@/api/operateManage/AppNotifyConfig';
import { useCommonStore } from '@/stores';
import AppNotifyConfigDetail from './components/AppNotifyConfigDetail.vue';
const detailRef = ref(null);
const commonStore = useCommonStore();
const router = useRouter()
const dialogVisible = ref(false)
const tableRowInx = ref(0)
const tableRow = ref({})
const page = ref(1)
const count = ref(0)
const btnLoding = ref(false)
const btnIndex = ref(0)
const loadingData = ref(false)
const current_id = ref('');

const toDetails = async (id) => {
  if(current_id.value==id){
    return detailRef.value.dialogVisible1 = true;
  }
  current_id.value = id;
  const res = await configDetail(id);
  if (res.code === 1000) {
    detailRef.value.detailsData = res.data;
    detailRef.value.dialogVisible1 = true;
  }
}

// 如果要使用reactive，直接声明单个对象使用不便，可以考虑外包一层顶级对象
const state = reactive({
    form: {
        page: page.value,
        limit: 20,

    }
})

const setStatus = async (index, item) => {
    btnLoding.value = true;
    btnIndex.value = index;
    const status = item.status === 1 ? 0 : 1;
    const res = await setSataus({ status, id: item.id });
    if (res.code === 1000) {
        tableData.value[index].status = status;
        if (tableData.value[index].effect_type === 1) {
            tableData.value[index].status_label = status === 1 ? "进行中" : "已关闭";
        } else {
            if (status === 1) {
                if (tableData.value[index].effect_start_time_default > tableData.value[index].now_time) {
                    tableData.value[index].status_label = "未开始";
                } else {
                    if (tableData.value[index].effect_end_time_default >= tableData.value[index].now_time) {
                        tableData.value[index].status_label = "进行中";
                    } else {
                        tableData.value[index].status_label = "已结束";
                    }
                }
            } else {
                tableData.value[index].status_label = "已关闭";
            }
        }

    }
    btnLoding.value = false;
    dialogVisible.value = false;
}


const tableColumn = ref([
    { label: '编号 ', prop: 'id' },
    { label: '配置名称', prop: 'title' },
    { label: '通知标题', prop: 'name' },
    { label: '触发节点', prop: 'trigger_node_label' },
    { label: '通知内容', prop: 'content' },
    { label: '生效时间', prop: 'effect_type_label' },
    { label: '指定国家', prop: 'country_code_label' },
    { label: '状态', prop: 'status_label' },
    { label: '创建时间', prop: 'create_time' },
    { label: '操作', prop: 'handle' }
])



const tableData = ref([])


// methods
const add = (item) => {
    commonStore.appNotifyConfigItem = item;
    router.push({
        name: "AppNotifyConfigAdd", query: {
            id: item.id
        }
    })
}

const dialogVisibleOpen = (index, item) => {
    tableRowInx.value = index;
    tableRow.value = item;
    if (item.status == 1) {
        dialogVisible.value = true;
    } else {
        setStatus(index, item);
    }
}

const search = async () => {
    loadingData.value = true;
    const res = await getAppNotifyConfig(state.form);


    if (res.code === 1000) {
        tableData.value = res.data.listData.list;
        count.value = res.data.listData.count;
    }
    loadingData.value = false;
}


const pageChange = (page) => {
    page.value = page
    search()
}

onBeforeMount(async () => {
    search(state.form);
})

</script>
  
<style lang="less" scoped>
.video-tutorial {
    .add {
        margin: 0 20px;
    }

    .my-table {
        margin: 20px;
    }
}

.my-form {
    padding: var(--el-main-padding);
    font-size: 16px;

    .text-center {
        text-align: center;
    }

    :deep(.el-form-item) {
        margin-right: 25px;
    }
}
</style>